<!DOCTYPE html><html><head>
	<meta charset="utf-8">
 <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">	<meta name="description" content="">
	<title>箱线图</title>
	<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
	<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
	<script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
	<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
	<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<!--
*************************************************************************
    Generated by HCODE at 2017-08-01 10:35:35
    From: https://code.hcharts.cn/demos/hhhhiQ
*************************************************************************
-->
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>

	<script>
	$(function () {
    $('#container').highcharts({
        chart: {
            type: 'boxplot'
        },
        title: {
            text: 'Highcharts 箱线图'
        },
        legend: {
            enabled: false
        },
        xAxis: {
            categories: ['1', '2', '3', '4', '5'],
            title: {
                text: ''
            }
        },
        yAxis: {
            title: {
                text: '观测值'
            },
            plotLines: [{
                value: 932,
                color: 'red',
                width: 1,
                label: {
                    text: '理论模型: 932',
                    align: 'center',
                    style: {
                        color: 'gray'
                    }
                }
            }]
        },
        tooltip: {
            pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {series.name}</b><br/>' + // eslint-disable-line no-dupe-keys
            '最大值: {point.high}<br/>' +
            'Q2\t: {point.q3}<br/>' +
            '中位数: {point.median}<br/>' +
            'Q1\t: {point.q1}<br/>' +
            '最小值: {point.low}<br/>'
        },
        series: [{
            name: '观测值',
            data: [
                [760, 801, 848, 895, 965],
                [733, 853, 939, 980, 1080],
                [714, 762, 817, 870, 918],
                [724, 802, 806, 871, 950],
                [834, 836, 864, 882, 910]
            ],
            tooltip: {
                headerFormat: '<em>实验号码： {point.key}</em><br/>'
            }
        }, {
            name: '异常值',
            color: Highcharts.getOptions().colors[0],
            type: 'scatter',
            data: [ // x, y positions where 0 is the first category
                [0, 644],
                [4, 718],
                [4, 951],
                [4, 969]
            ],
            marker: {
                fillColor: 'white',
                lineWidth: 1,
                lineColor: Highcharts.getOptions().colors[0]
            },
            tooltip: {
                pointFormat: 'Observation: {point.y}'
            }
        }]
    });
});
</script>

</body></html>